<template>
  <div class="app-logo">F云盘</div>
  <div class="app-nav-right">
    <div class="app-nav-username">
      <ElAvatar
        :size="50"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      ></ElAvatar>
      <!--      当前用户名称-->
      <span>{{ userInfo.userName }}</span>
    </div>
    <div class="app-nav-tool">
      <div class="app-nav-text logout" @click="handleLogout">退出</div>
    </div>
  </div>
</template>
<script setup>
import { getUserInfo } from '@/utils/common/user'
import req from '@/utils/req/axios.js'
import { useRouter } from 'vue-router'
import { TOKEN_KEY, USERINFO_KEY } from '@/utils/constants'
import { tip } from '@tip'
import urls from '@/utils/constants/urls.js'

const router = useRouter()

const userInfo = getUserInfo()

async function handleLogout() {
  try {
    await req.get(urls.v1.system.auth.logout)
  } finally {
    tip({ message: '退出成功', type: 'success' })
    localStorage.removeItem(TOKEN_KEY)
    localStorage.removeItem(USERINFO_KEY)
    router.push({ name: 'login' })
  }
}
</script>
<style lang="less">
.app-nav-right {
  display: flex;
  align-items: center;
}

.app-nav-username {
  display: flex;
  align-items: center;

  .el-avatar + span {
    margin-left: 10px;
  }
}

.app-nav-tool {
  margin-left: 10px;
}

.app-nav-text {
  cursor: pointer;
}
</style>
